<script>
import config from '../config'

export default {
  name: 'CourseView',

  data() {
    return {
      active: false,
      briefTop: {},
      shares: [],
      briefOnline: {},
      briefOfflineOnline: {},
      linkOnline: [],
      linkOfflineOnline: [],
      cdn: config.cdn,
      content: config.content
    }
  },

  computed: {
    topArticle() {
      return {
        'imgSrc': 'http://image.fit-start.co/course-banner.png',
        'title': this.briefTop.title,
        'subtitle': this.briefTop.subTitle,
        'description': this.briefTop.description && this.briefTop.description.replace(/(\r\n)/g, '<br>')
      }
    },

    onlineCamps() {
      return this.linkOnline.map(function(item, index) {
        return {
          'address': item.address,
          'imgSrc': `http://image.fit-start.co/online_course_${++index}.png`
        }
      })
    },

    offlineCamps() {
      return this.linkOfflineOnline.map(function(item, index) {
        return {
          'address': item.address,
          'imgSrc': `http://image.fit-start.co/offline_course_${++index}.png`
        }
      })
    }
  },
  
  methods: {
    toggleMore (active) {
      this.active = !active;
    },

    scrollTop () {
      window.scrollTop = 0
    },

    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PAGE_CONFIG', { page: 'course' })
        .then(data => {
          this.briefTop = data.brief_top[0]
          this.shares = data.course_shares
          this.briefOnline = data.brief_online[0]
          this.briefOfflineOnline = data.brief_offline_online[0]
          this.linkOnline = data.link_online
          this.linkOfflineOnline = data.link_offline_online
        })
    }
  },

  beforeMount() {
    this.loadPageConfig()
  }
}
</script>

<template>
  <div id="course-view" class="course clearfix" style="margin: 0; padding: 0px;">
   <!--  -->

    <div style="border-bottom: 1px solid #A69032;">
      <router-link to="/products?c=offline－onetoone" style="display: block;">
        <img src="../../static/images/course/course-1.jpg" width="100%" alt="">
      </router-link>
      </div>
    <div style="border-bottom: 1px solid #A69032;">
      <router-link to="/products?c=online-fit" style="display: block;">
        <img src="../../static/images/course/course-2.jpg" width="100%" alt="">
      </router-link>
    </div>
    
    <div class="more-content fade" :class="{ 'in': active}">
      <div style="border-bottom: 1px solid #A69032;">
        <router-link to="/products?c=Online-shape" style="display: block;">
          <img src="../../static/images/course/course-3.jpg" width="100%" alt="">
        </router-link>
      </div>
      <div style="border-bottom: 1px solid #A69032;">
        <router-link to="/products?c=online-hot-mum" style="display: block;">
          <img src="../../static/images/course/course-4.jpg" width="100%" alt="">
        </router-link>
      </div>
    </div>

    <div class="course-more-btn">
      <a href="javascript:void(0);" @click="toggleMore(active)"><img src="../../static/images/more-finger.png">&nbsp;&nbsp;{{active ? '收起' : '更多'}}<img class="gif" src="../../static/images/doat.gif"></a>
    </div>

    <div class="close-more">
      <a class="arrow" :class="{ 'hide' : !active } " href="#" @click="scrollTop()"><img src="../../static/images/arrow-up.jpg"></a>
    </div>
    
  </div>
</template>

<style>
@import "../../static/styles/course.css";
</style>